<template>
  <div class="orance">
    <div class="orance_box">
      <el-table
        :data="passageList"
        stripe
        style="width: 100%">
        <el-table-column
          prop="time"
          label="发布日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="title"
          label="内容标题"
          width="180">
        </el-table-column>
        <el-table-column
          prop="ower"
          label="作者">
        </el-table-column>
        <el-table-column
          prop="read"
          label="阅读数量">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <router-link
        tag="el-button"
        :to="{name: 'CommunChildren', params: {id: scope.row.id}}">点击查看</router-link>
          </template>
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>
<style>

</style>

<script>
export default {
    data(){
        return{
            nextFlag: true,
            questionId: null,
            commentText:"",
            commenter: "session", //评论人
            type: 0, //0为评论作者1为评论别人的评论2为评论别人的别人
            oldComment: null,
            chosedIndex: -1, //被选中的评论的index
            question:[],
            passageList:[{
                id:1001,
                title: "孔乙己节选",
                time: "2020.01.1",
                read: 50,
                ower: '王尔哈',
                content: "<p>鲁镇的酒店的格局，是和别处不同的：都是当街一个曲尺形的大柜台，柜里面预备着热水，可以随时温酒。做工的人，傍午傍晚散了工，每每花四文铜钱，买一碗酒，——这是二十多年前的事，现在每碗要涨到十文，——靠柜外站着，热热的喝了休息；倘肯多花一文，便可以买一碟盐煮笋，或者茴香豆，做下酒物了，如果出到十几文，那就能买一样荤菜，但这些顾客，多是短衣帮，大抵没有这样阔绰。只有穿长衫的，才踱进店面隔壁的房子里，要酒要菜，慢慢地坐喝。</p><p>我从十二岁起，便在镇口的咸亨酒店里当伙计，掌柜说，样子太傻，怕侍候不了长衫主顾，就在外面做点事罢。外面的短衣主顾，虽然容易说话，但唠唠叨叨缠夹不清的也很不少。他们往往要亲眼看着黄酒从坛子里舀出，看过壶子底里有水没有，又亲看将壶子放在热水里，然后放心：在这严重兼督下，羼水也很为难。所以过了几天，掌柜又说我干不了这事。幸亏荐头的情面大，辞退不得，便改为专管温酒的一种无聊职务了。</p>",
                comment: [
                    {
                    name: "专业群演1",
                    time: "2020.01.1",
                    content: "好,西皮，6666",
                    reply: [{
                        responder: "专业捧哏",
                        reviewers: "专业群演1",
                        time: "2020.01.2",
                        content: "你说得对"
                        },{
                        responder: "专业群演1",
                        reviewers: "专业捧哏",
                        time: "2020.01.1",
                        content: "很强"
                    }]
                    },
                    {
                    name: "路过群演2",
                    time: "2020.02.1",
                    content: "好,讲得非常好，good",
                    reply: []
                    }]
                },


                {
                id:1002,
                title: "呐喊自序",
                time: "2020.01.1",
                ower: '李富贵',
                read: 50,
                content: "<p>鲁镇的酒店的格局，是和别处不同的：都是当街一个曲尺形的大柜台，柜里面预备着热水，可以随时温酒。做工的人，傍午傍晚散了工，每每花四文铜钱，买一碗酒，——这是二十多年前的事，现在每碗要涨到十文，——靠柜外站着，热热的喝了休息；倘肯多花一文，便可以买一碟盐煮笋，或者茴香豆，做下酒物了，如果出到十几文，那就能买一样荤菜，但这些顾客，多是短衣帮，大抵没有这样阔绰。只有穿长衫的，才踱进店面隔壁的房子里，要酒要菜，慢慢地坐喝。</p><p>我从十二岁起，便在镇口的咸亨酒店里当伙计，掌柜说，样子太傻，怕侍候不了长衫主顾，就在外面做点事罢。外面的短衣主顾，虽然容易说话，但唠唠叨叨缠夹不清的也很不少。他们往往要亲眼看着黄酒从坛子里舀出，看过壶子底里有水没有，又亲看将壶子放在热水里，然后放心：在这严重兼督下，羼水也很为难。所以过了几天，掌柜又说我干不了这事。幸亏荐头的情面大，辞退不得，便改为专管温酒的一种无聊职务了。</p>",
                comment: [
                    {
                    name: "专业群演1",
                    time: "2020.01.2",
                    content: "好,西皮，6666",
                    reply: [{
                        responder: "专业捧哏",
                        reviewers: "专业群演1",
                        time: "2020.01.3",
                        content: "你说得对"
                        },{
                        responder: "专业群演1",
                        reviewers: "专业捧哏",
                        time: "2020.01.4",
                        content: "很强"
                    }]
                    },
                    {
                    name: "路过群演2",
                    time: "2020.01.5",
                    content: "好,讲得非常好，good",
                    reply: []
                    }]
                },
                {
                id:1003,
                title: "孔乙己节选",
                time: "2020.01.1",
                ower: '张长老',
                read: 50,
                content: "<p>鲁镇的酒店的格局，是和别处不同的：都是当街一个曲尺形的大柜台，柜里面预备着热水，可以随时温酒。做工的人，傍午傍晚散了工，每每花四文铜钱，买一碗酒，——这是二十多年前的事，现在每碗要涨到十文，——靠柜外站着，热热的喝了休息；倘肯多花一文，便可以买一碟盐煮笋，或者茴香豆，做下酒物了，如果出到十几文，那就能买一样荤菜，但这些顾客，多是短衣帮，大抵没有这样阔绰。只有穿长衫的，才踱进店面隔壁的房子里，要酒要菜，慢慢地坐喝。</p><p>我从十二岁起，便在镇口的咸亨酒店里当伙计，掌柜说，样子太傻，怕侍候不了长衫主顾，就在外面做点事罢。外面的短衣主顾，虽然容易说话，但唠唠叨叨缠夹不清的也很不少。他们往往要亲眼看着黄酒从坛子里舀出，看过壶子底里有水没有，又亲看将壶子放在热水里，然后放心：在这严重兼督下，羼水也很为难。所以过了几天，掌柜又说我干不了这事。幸亏荐头的情面大，辞退不得，便改为专管温酒的一种无聊职务了。</p>",
                comment: [
                    {
                    name: "专业群演1",
                    time: "2020.01.2",
                    content: "好,西皮，6666",
                    reply: [{
                        responder: "专业捧哏",
                        reviewers: "专业群演1",
                        time: "2020.01.3",
                        content: "你说得对"
                        },{
                        responder: "专业群演1",
                        reviewers: "专业捧哏",
                        time: "2020.01.4",
                        content: "很强"
                    }]
                    },
                    {
                    name: "路过群演2",
                    time: "2020.01.5",
                    content: "好,讲得非常好，good",
                    reply: []
                    }]
                }
            ]
        }
    },

  methods: {
    handleClick(row) {
        console.log(row.id);
      },
    changeCommenter(name,index) {
			this.oldComment = name;
			this.chosedIndex = index;
      this.type = 1;
      
		},
    addComment() {
      if (this.type == 0) {
        this.comment.push({
          name: "session",
          time: getTime(),
          content:this.commentText ,
          reply: []
        });
      } else if (this.type == 1) {
        this.comment[this.chosedIndex].reply.push({
          responder: "session",
          reviewers: this.oldComment,
          time: getTime(),
          content: this.commentText,
          reply:[]
        });
        this.type = 0;
      }
      this.commentText = "";
    },

    canelCommit() {
      this.type = 0;
      this.commentText = "";
    },

  }
};

function getTime() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();
  month.length < 2 ? "0" + month : month;
  day.length < 2 ? "0" + day : day;
  return year + "-" + month + "-" + day;
}
</script>
<style>

.h1, h1 {
    font-size: 2.5rem;
}
  .orance_box{
    width:980px;
    margin: 0 auto;
  }
  .blogArticle{
    width: 980px;
    margin: 0 auto;
    background-color: #f8f8f8;
  }
  .titleBox{

    border-bottom: 1px solid #ccc;
    margin: 10px 0 0;
  }
  .titleBox h1 {
    text-align: center;
    color: #01553D;
  }
  .titleBox p {
    text-align: right;
    font-size: 16px;
    margin: 10px 0;
  }
  .articleText {
    font-size: 16px;
    margin: 20px;
  }
  .articleText p {
    text-indent: 2em;
  }
  .commentBox {
    margin: 20px;
  }
  .commentBox h3 {
    color: #634322;
    background: #e9e5df;
    padding: 8px 15px;
    text-align: left;
    font-size: 16px;
  }
  .comment {
    margin-bottom: 15px;
  }
  .comment b {
    color: #01553D;
    font-size: 16px;
    display: block;
    margin: 5px 0;
  }
  .comment p {
    font-size: 16px;
    color: #333;
  
  }
  .reply {
    margin: 15px 0 15px 50px;
  
  }
  .comment b span {
    color: #333;
    font-size: 14px;
    margin-left: 20px;
  }
  .commentBox {
    margin: 20px;
  }
  .commentBox h3 {
    color: #634322;
    background: #e9e5df;
    padding: 8px 15px;
    text-align: left;
    font-size: 16px;
  }
  .commentBox textarea {
    overflow: auto;
    width: 100%;
    height: 95px;
    outline: none;
    resize: none;
    padding: 0;
    margin: 5px 0 0 0;
  }
  .comment + .comment, .reply + .reply {
    border-top: 1px solid #ccc;
}
.el-button.is-round {
    border-radius: 56px!important;
    padding: 8px 23px!important;
}
</style>

